<template>
  <div class="charts-container" :class="{ 'locked': isLocked }">
    <div class="lock-overlay" v-if="isLocked">
      <el-button type="primary" @click="unlockPage">
        <i class="el-icon-unlock"></i> 点击解锁页面
      </el-button>
    </div>
    <div class="charts-grid">
      <div ref="lineChart" class="chart-item"></div>
      <div ref="barChart" class="chart-item"></div>
      <div ref="pieChart" class="chart-item"></div>
      <div ref="radarChart" class="chart-item"></div>
      <div ref="stackedBarChart" class="chart-item"></div>
      <div ref="scatterChart" class="chart-item"></div>
      <div ref="trendLineChart" class="chart-item"></div>
      <div ref="heatmapChart" class="chart-item"></div>
      <div ref="funnelChart" class="chart-item"></div>
    </div>
    <div class="control-panel">
      <el-button type="warning" @click="lockPage">
        <i class="el-icon-lock"></i> 锁定页面
      </el-button>
    </div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const lineChart = ref(null);
    const barChart = ref(null);
    const pieChart = ref(null);
    const radarChart = ref(null);
    const stackedBarChart = ref(null);
    const scatterChart = ref(null);
    const trendLineChart = ref(null);
    const heatmapChart = ref(null);
    const funnelChart = ref(null);
    const isLocked = ref(false);
    let lineInstance, barInstance, pieInstance, radarInstance, stackedBarInstance, scatterInstance,
        trendLineInstance, heatmapInstance, funnelInstance;

    const initCharts = () => {
      // 折线图 - 油画风格热度趋势
      lineInstance = echarts.init(lineChart.value);
      lineInstance.setOption({
        title: { 
          text: '油画风格热度趋势', 
          left: 'center', 
          textStyle: { color: '#2A3D66' } 
        },
        tooltip: { 
          trigger: 'axis',
          formatter: '关注指数：{c}'
        },
        xAxis: {
          type: 'category',
          data: ['古典主义', '印象派', '抽象派', '写实主义', '现代艺术'],
          axisLabel: { color: '#5A4E41' }
        },
        yAxis: { 
          type: 'value',
          axisLabel: { 
            color: '#5A4E41',
            formatter: '{value} 指数'
          }
        },
        series: [{
          data: [680, 820, 950, 890, 1050], 
          type: 'line',
          smooth: true,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#C2B280' },
            { offset: 1, color: '#9E8C6B' } 
          ]),
          areaStyle: { color: 'rgba(194,178,128,0.1)' },
          symbol: 'circle',
          symbolSize: 14
        }]
      });

      // 柱状图 - 热门油画交易量
      barInstance = echarts.init(barChart.value);
      barInstance.setOption({
        title: { 
          text: '热门油画交易量', 
          left: 'center', 
          textStyle: { color: '#2A3D66' } 
        },
        tooltip: { 
          trigger: 'axis',
          formatter: '交易数量：{c} 幅' 
        },
        xAxis: {
          type: 'category',
          data: ['梵高', '莫奈', '毕加索', '达芬奇', '塞尚'],
          axisLabel: { color: '#5A4E41', rotate: 30 } 
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#5A4E41' }
        },
        series: [{
          data: [158, 142, 135, 128, 120], 
          type: 'bar',
          barWidth: '60%',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#8C7B6B' },
            { offset: 1, color: '#5A4E41' } 
          ]),
          itemStyle: { 
            borderRadius: [5, 5, 0, 0],
            shadowColor: 'rgba(90,78,65,0.2)' 
          }
        }]
      });

      // 饼图 - 作品来源分布
      pieInstance = echarts.init(pieChart.value);
      pieInstance.setOption({
        title: { 
          text: '作品来源分布', 
          left: 'center', 
          textStyle: { color: '#2A3D66' } 
        },
        tooltip: { 
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}幅 (占比{d}%)' 
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          label: { color: '#5A4E41' },
          data: [
            { value: 42, name: '私人收藏', itemStyle: { color: '#C2B280' } }, 
            { value: 28, name: '美术馆', itemStyle: { color: '#9E8C6B' } },  
            { value: 20, name: '艺术拍卖', itemStyle: { color: '#7B6B5A' } },  
            { value: 10, name: '艺术家直供', itemStyle: { color: '#5A4E41' } }, 
          ],
          emphasis: { 
            itemStyle: { 
              shadowBlur: 10,
              shadowColor: 'rgba(90,78,65,0.1)' 
            } 
          }
        }]
      });

      // 雷达图 - 油画属性评估
      radarInstance = echarts.init(radarChart.value);
      radarInstance.setOption({
        title: { 
          text: '油画属性评估', 
          left: 'center', 
          textStyle: { color: '#2A3D66' } 
        },
        radar: {
          indicator: [
            { name: '艺术价值', max: 100 },
            { name: '保存状态', max: 100 },
            { name: '市场热度', max: 100 },
            { name: '创作年代', max: 100 },
            { name: '作者知名度', max: 100 }
          ],
          axisLine: { lineStyle: { color: '#5A4E41' } } 
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [95, 75, 88, 90, 85],
              name: '古典油画',
              color: '#C2B280',
              areaStyle: { color: 'rgba(194,178,128,0.1)' }
            },
            {
              value: [80, 90, 70, 85, 88],
              name: '现代油画',
              color: '#8C7B6B',
              areaStyle: { color: 'rgba(140,123,107,0.1)' }
            }
          ],
          symbol: 'circle',
          symbolSize: 10
        }]
      });

      // 堆叠柱状图 - 油画销售分类统计
      stackedBarInstance = echarts.init(stackedBarChart.value);
      stackedBarInstance.setOption({
        title: {
          text: '近年油画销售分类统计',
          left: 'center',
          textStyle: { color: '#2A3D66' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['古典主义', '印象派', '抽象派', '现代艺术'],
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['2020', '2021', '2022', '2023', '2024'],
          axisLabel: { color: '#5A4E41' }
        },
        yAxis: {
          type: 'value',
          name: '销售量 (幅)',
          axisLabel: { color: '#5A4E41' }
        },
        series: [
          {
            name: '古典主义',
            type: 'bar',
            stack: 'total',
            emphasis: { focus: 'series' },
            data: [32, 35, 40, 38, 42],
            itemStyle: { color: '#C2B280' }
          },
          {
            name: '印象派',
            type: 'bar',
            stack: 'total',
            emphasis: { focus: 'series' },
            data: [28, 32, 36, 40, 45],
            itemStyle: { color: '#9E8C6B' }
          },
          {
            name: '抽象派',
            type: 'bar',
            stack: 'total',
            emphasis: { focus: 'series' },
            data: [25, 28, 32, 36, 38],
            itemStyle: { color: '#7B6B5A' }
          },
          {
            name: '现代艺术',
            type: 'bar',
            stack: 'total',
            emphasis: { focus: 'series' },
            data: [22, 25, 30, 35, 40],
            itemStyle: { color: '#5A4E41' }
          }
        ]
      });

      // 散点图 - 艺术品年代与价值关系
      scatterInstance = echarts.init(scatterChart.value);
      scatterInstance.setOption({
        title: {
          text: '艺术品年代与价值关系',
          left: 'center',
          textStyle: { color: '#2A3D66' }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return `创作年代: ${params.value[0]}年<br/>估值: ${params.value[1]}万元`;
          }
        },
        xAxis: {
          type: 'value',
          name: '创作年代',
          min: 1800,
          max: 2024,
          axisLabel: { color: '#5A4E41' }
        },
        yAxis: {
          type: 'value',
          name: '估值 (万元)',
          axisLabel: { color: '#5A4E41' }
        },
        series: [{
          type: 'scatter',
          data: [
            [1889, 4500],
            [1503, 85000],
            [1937, 20000],
            [1872, 3500],
            [1665, 18000],
            [1931, 15000],
            [1893, 12000],
            [1925, 8000],
            [1962, 6000],
            [2010, 2000],
            [2015, 1500],
            [2020, 1000]
          ],
          symbolSize: function (data) {
            return Math.sqrt(data[1]) / 10;
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: '#C2B280' },
              { offset: 1, color: '#5A4E41' }
            ])
          }
        }]
      });

      // 新增趋势线图 - 艺术品市场价值走势
      trendLineInstance = echarts.init(trendLineChart.value);
      trendLineInstance.setOption({
        title: {
          text: '艺术品市场价值走势',
          left: 'center',
          textStyle: { color: '#2A3D66' }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['拍卖价格', '市场估值'],
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['2020Q1', '2020Q2', '2020Q3', '2020Q4', '2021Q1', '2021Q2', '2021Q3', '2021Q4'],
          axisLabel: { color: '#5A4E41' }
        },
        yAxis: {
          type: 'value',
          name: '价值 (万元)',
          axisLabel: { color: '#5A4E41' }
        },
        series: [
          {
            name: '拍卖价格',
            type: 'line',
            smooth: true,
            data: [1200, 1350, 1800, 2100, 2400, 2800, 3200, 3500],
            itemStyle: { color: '#C2B280' }
          },
          {
            name: '市场估值',
            type: 'line',
            smooth: true,
            data: [1000, 1200, 1600, 1900, 2200, 2600, 3000, 3300],
            itemStyle: { color: '#9E8C6B' }
          }
        ]
      });

      // 新增热力图 - 艺术品地域分布热度
      heatmapInstance = echarts.init(heatmapChart.value);
      heatmapInstance.setOption({
        title: {
          text: '艺术品地域分布热度',
          left: 'center',
          textStyle: { color: '#2A3D66' }
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          top: '60px'
        },
        xAxis: {
          type: 'category',
          data: ['北京', '上海', '广州', '深圳', '杭州'],
          axisLabel: { color: '#5A4E41' }
        },
        yAxis: {
          type: 'category',
          data: ['古典', '现代', '当代', '后现代'],
          axisLabel: { color: '#5A4E41' }
        },
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0',
          inRange: {
            color: ['#F5EFE6', '#C2B280', '#9E8C6B', '#5A4E41']
          }
        },
        series: [{
          type: 'heatmap',
          data: [
            [0, 0, 85], [0, 1, 75], [0, 2, 65], [0, 3, 55],
            [1, 0, 75], [1, 1, 85], [1, 2, 80], [1, 3, 70],
            [2, 0, 65], [2, 1, 70], [2, 2, 85], [2, 3, 75],
            [3, 0, 55], [3, 1, 65], [3, 2, 75], [3, 3, 85],
            [4, 0, 60], [4, 1, 70], [4, 2, 80], [4, 3, 90]
          ],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });

      // 新增漏斗图 - 艺术品交易转化漏斗
      funnelInstance = echarts.init(funnelChart.value);
      funnelInstance.setOption({
        title: {
          text: '艺术品交易转化漏斗',
          left: 'center',
          textStyle: { color: '#2A3D66' }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人'
        },
        series: [{
          type: 'funnel',
          left: '10%',
          right: '10%',
          top: '10%',
          bottom: '10%',
          width: '80%',
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside'
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          emphasis: {
            label: {
              fontSize: 20
            }
          },
          data: [
            { value: 100, name: '浏览展览', itemStyle: { color: '#C2B280' } },
            { value: 80, name: '咨询详情', itemStyle: { color: '#9E8C6B' } },
            { value: 60, name: '议价商谈', itemStyle: { color: '#7B6B5A' } },
            { value: 40, name: '意向购买', itemStyle: { color: '#5A4E41' } },
            { value: 20, name: '成功交易', itemStyle: { color: '#2A3D66' } }
          ]
        }]
      });
    };

    const handleResize = () => {
      [lineInstance, barInstance, pieInstance, radarInstance, stackedBarInstance, scatterInstance,
       trendLineInstance, heatmapInstance, funnelInstance].forEach(
        chart => chart && chart.resize()
      );
    };

    const lockPage = () => {
      isLocked.value = true;
      ElMessage.success('页面已锁定');
    };

    const unlockPage = () => {
      isLocked.value = false;
      ElMessage.success('页面已解锁');
    };

    onMounted(() => {
      initCharts();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      [lineInstance, barInstance, pieInstance, radarInstance, stackedBarInstance, scatterInstance,
       trendLineInstance, heatmapInstance, funnelInstance].forEach(
        chart => chart && chart.dispose()
      );
    });

    return { 
      lineChart, barChart, pieChart, radarChart, stackedBarChart, scatterChart,
      trendLineChart, heatmapChart, funnelChart,
      isLocked, lockPage, unlockPage
    };
  }
}
</script>

<style scoped>
.charts-container {
  position: relative;
  padding: 20px;
  background: linear-gradient(145deg, #F5EFE6 0%, #E0D8D0 100%);
  min-height: 100vh;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.chart-item {
  height: 400px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(90,78,65,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(194,178,128,0.2);
}

.chart-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 30px rgba(90,78,65,0.12);
}

.control-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.lock-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.locked {
  pointer-events: none;
}

.locked .lock-overlay {
  pointer-events: auto;
}

.el-button {
  padding: 12px 20px;
  font-size: 16px;
}

.el-button i {
  margin-right: 8px;
}
</style>